<template>
	<view class="">
		<view class="navbar">
			<u-navbar title="电影/影院" title-color="#ffffff" :background="background" back-icon-color="#ffffff" height="50"
				:custom-back="back">
				<view slot="right">
					<u-icon name="file-text" color="#ffffff" size="48" class="u-p-r-20" @click="toOrder"></u-icon>
				</view>
			</u-navbar>
		</view>
		<view class="search">
			<view class="address" @click="cityChoose()">
				<text class="city" style="padding-right: 4rpx;">{{city}}</text>
				<u-icon name="arrow-down" color="#ffffff"></u-icon>
			</view>
			<u-search placeholder="搜索影片/影院" disabled :show-action="false" @click="search" bg-color="#FFB576"
				search-icon-color="#ffffff" placeholderColor="white"></u-search>
		</view>

		<view class="swiperBox">
			<view class="swiper">
				<u-swiper :list="banner" height="208"></u-swiper>
			</view>
		</view>
		<view class="card u-m-t-50" >
			<!-- 筛选 -->
			<view class="mioveType">
				<view>
					<text v-for="(item,index) in tabs" :key="index" class="tabs" @click="tabsHandle(index)"
						:class="{active:active==index+1?'active':''}">{{item}}</text>
				</view>
				<view style="color: #979797;display: flex;align-items: center;font-size: 26rpx;" @click="quanbu">
					<text>全部</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- 电影 即将上映 -->
			<view>
				<moiveBannerList :moiveBannerData="moiveBannerData" :type="active" />
			</view>
		</view>

		<!-- 影院列表 -->
		<view class="u-p-b-15">
			<cinemaList ref="cinemaList" :page="page" />
		</view>
	</view>
</template>

<script>
	import moiveBannerList from './components/moiveBannerList.vue'
	import cinemaList from './components/cinemaList.vue'
	export default {
		data() {
			return {
				city: '',
				background: {
					backgroundImage: 'linear-gradient(to right, #FF6801, #FF9832)'
				},
				banner: [],
				tabs: ['正在热映', '即将上映'],
				active: 1, // 热映 即将上映默认显示索引
				moiveBannerData: [],
				page: 1
			}
		},
		components: {
			moiveBannerList,
			cinemaList
		},
		onShow() {
			this.city = uni.getStorageSync('city');
			if (this.city) {
				this.getCityList();
			} else {
				var _this = this;
				let amap_key = "914e53e8abb36cddf40df408b4e41912"
				uni.getLocation({
					type:'gcj02',
					success(pos) {
						uni.request({
							url: 'https://restapi.amap.com/v3/geocode/regeo',
							data: {
								location: `${pos.longitude},${pos.latitude}`,
								key: amap_key,
								poitype: '城市',
							},
							success(res) {
								uni.setStorageSync('lat', pos.latitude);
								uni.setStorageSync('lng', pos.longitude);
								uni.setStorageSync('city', res.data.regeocode.addressComponent.city);
								_this.getCityList();
							}
						});
					}
				});
			}
		},
		mounted() {
			this.filmCarousel();
			this.getFilmList();
		},
		onReachBottom() {
			this.$refs.cinemaList.page = ++this.$refs.cinemaList.page;
			this.$refs.cinemaList.getCinemaList();
		}, 
		onPullDownRefresh() {
			this.city = uni.getStorageSync('city');
			this.moiveBannerData = [];
			this.$refs.cinemaList.cinemaList = [];
			this.$refs.cinemaList.page = 1;
			this.$refs.cinemaList.getCinemaList();
			this.getFilmList();
			uni.stopPullDownRefresh();
		},
		methods: {
			//导航栏返回
			back() {
				// #ifdef H5
				window.history.back()
				// #endif
				// #ifdef APP-PLUS
				uni.navigateBack()
				// #endif
			},
			//搜索
			search() {
				uni.navigateTo({
					url: '/pages/moive/search'
				})
			},
			//轮播图
			filmCarousel() {
				this.$u.api.filmCarousel().then(res => {
					if (res.code == 0) {
						res.data.forEach(item => {
							this.banner.push({
								image: item.imageUrl,
								title: ''
							})
						})
					}
				})
			},
			//获取热映电影列表
			getFilmList() {
				this.$u.api.getFilmList({
					name: '',
					page: 1,
					size: 20,
					type: this.active
				}).then(res => {
					if (res.code == 0) {
						this.moiveBannerData = res.data;
					}
				})
			},
			//正在热映和即将上映切换
			tabsHandle(index) {
				this.active = index + 1;
				this.getFilmList();
			},
			//获取城市列表
			getCityList() {
				var _this = this;
				this.$u.api.getCityList().then(res => {
					res.data.forEach(item => {
						if (item.cityName == _this.city) {
							uni.setStorageSync('cityId', item.id);
							this.$refs.cinemaList.cinemaList = [];
							this.$refs.cinemaList.page = 1;
							this.$refs.cinemaList.getCinemaList();
						}
					})
				})
			},
			toOrder() {
				uni.navigateTo({
					url: '/pages/moive/order'
				})
			},
			quanbu() {
				uni.navigateTo({
					url: '/pages/moive/moiveAndCinemaList'
				})
			},
			cityChoose() {
				uni.navigateTo({
					url: '/pages/moive/city'
				})
			}
		}
	}
</script>

<style scoped>
	>>>.navbar .u-icon--right {
		background: #ff9832;
		border-radius: 50%;
		width: 56rpx;
		height: 56rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
	}

	.search {
		padding: 30rpx;
		background: linear-gradient(to right, #FF6801, #FF9832);
		display: flex;
	}

	.address {
		font-size: 26rpx;
		display: flex;
		align-items: center;
		margin-right: 20rpx;
		color: white;
	}

	.city {
		max-width: 120rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
	}

	.swiper {
		padding:12rpx 30rpx;
	}

	.swiperBox {
		width: 100%;
		height: 196rpx;
		background: linear-gradient(to right, #FF6801, #FF9832);
		border-bottom-left-radius: 20%;
		border-bottom-right-radius: 20%;
	}

	.card {
		padding: 20rpx 0;
		margin: 30rpx;
		box-shadow: 0 4rpx 24rpx 0 rgb(0 0 0 / 10%);
		border-radius: 10rpx;
	}

	.mioveType {
		display: flex;
		font-size: 28rpx;
		justify-content: space-between;
		align-items: center;
		padding: 0 16rpx 30rpx;
	}

	.tabs {
		font-size: 28rpx;
		margin-right: 30rpx;
	}

	.active {
		font-size: 30rpx;
		color: #FF6600;
	}
</style>
